<template>
  <div class="home-container">
    <nav>随手记</nav>
    <main><show ref="show"></show></main>
    <footer class="footer">
      <div @click="$router.push({name:'chart'})">
        <span class="iconfont icon-tubiao" style="font-size:4vh"></span><br>
        <span>图表</span>
      </div>
      <div class="bt" @click="$router.push({name:'tally'})">记一笔</div>
      <div @click="$router.push({name:'PayTypeList'})">
        <span class="iconfont icon-liushui" style="font-size:4vh"></span><br>
        <span>流水</span>
      </div>
    </footer>
  </div>
</template>

<script>
import show from '@/components/home/show'
export default {
  name: "m_home",
  components: {
    show
  },
  mounted() {
    this.saveTagPayList()
    // this.$store.commit('initTagPayList')
  },
  methods: {
    // 这里把本月支出类型明细存到vuex和本地
    saveTagPayList() {
      let list
      let month = new Date().getMonth() + 1
      month = month>= 10 ? new Date().getMonth() + 1 : '0' + month
      let date = `${new Date().getFullYear()}-${month}`
      list = this.$store.state.payList.filter((item) =>{
        return item.date.slice(0,7) == date
      })
      let tagList = new Map()
      list.forEach((item) =>{
        item.tagName.forEach((item1) =>{
          if (tagList.has(item1.type)) {
            let money = tagList.get(item1.type) + item1.money
            tagList.set(item1.type,money)
          } else {
            tagList.set(item1.type,item1.money)
          }
        })
      })
      list = [...tagList]
      this.$store.commit('saveTagPayList',list)
    }
  }
}
</script>

<style lang="less" scoped>
  .home-container{
    height: 100vh;
    background: #f5f4f9;
    position: relative;
    overflow: hidden;
    nav {
      display: flex;
      justify-content: center;
      padding: 12px 20px;
      align-items: center;
      background: #EBEFF2;
    }
    main {
      height: 93vh;
      padding-bottom: 50px;
      overflow: scroll;
    }
    footer {
      background-color: #EBEFF2;
      height: 50px;
      position: absolute;
      width: 100%;
      display: flex;
      //font-size: 6vh;
      justify-content: space-around;
      align-items: center;
      bottom: 0px;
      div {
        width: 35%;
        text-align: center;
      }
      .bt {
        width: 100px;
        height: 40px;
        text-align: center;
        line-height: 40px;
        color: white;
        border-radius: 15px;
        background-color: #ADCC65;
      }
    }
}
@font-face {
  font-family: 'myFirstFont';
  src: url('../assets/font/neon.ttf')
}
  // neon flux 是两种字体，非常酷炫哦
.neon {
  font-family: myFirstFont;
  text-shadow: 0 0 3vw #F4BD0A;
  animation: neon 2s ease-in-out infinite;
}
.flux {
  font-family: myFirstFont;
  text-shadow: 0 0 3vw #179E05;
  animation: flux 2s linear infinite;
}
@keyframes neon {
  0%, 100% {
    text-shadow: 0 0 1vw #FA1C16, 0 0 3vw #FA1C16, 0 0 10vw #FA1C16, 0 0 10vw #FA1C16, 0 0 .4vw #FED128, .5vw .5vw .1vw #806914;
    color: #FFFC00;
  }
  50% {
    text-shadow: 0 0 .5vw #800E0B, 0 0 1.5vw #800E0B, 0 0 5vw #800E0B, 0 0 5vw #800E0B, 0 0 .2vw #800E0B, .5vw .5vw .1vw #40340A;
    color: #806914;
  }
}
@keyframes flux {
  0%, 100% {
    text-shadow: 0 0 1vw #10ff4c, 0 0 3vw #1041FF, 0 0 10vw #1041FF, 0 0 10vw #1041FF, 0 0 .4vw #8BFDFE, .5vw .5vw .1vw #147280;
    color: #03C03C;
  }
  50% {
    text-shadow: 0 0 .5vw #024218, 0 0 1.5vw #024713, 0 0 5vw #023812, 0 0 5vw #012707, 0 0 .2vw #022201, .5vw .5vw .1vw #011a06;
    color: #179E05;
  }
}
</style>
